<template>
  <div class="permission-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="addFn(1,0)">添加权限</el-button>
        </div>
        <!-- row-key 这个是渲染树形数据时支持子节点数据异步加载 -->
        <el-table
          :data="list"
          border
          row-key="id"
        >
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- type为1时为页面级访问权限,它可以继续添加:设置页面下边某个功能是否可以操作 -->
              <!-- type为2时为按钮级别的访问权限,它就不能继续细分了,他就没有添加了 -->
              <el-button v-if="1 === scope.row.type" type="text" @click="addFn(2,scope.row.id)">添加</el-button>
              <el-button type="text" @click="editFn(scope.row.id)">编辑</el-button>
              <el-button type="text" @click="delFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
        :title="isEdit === true? `编辑:${permissionForm.name}`:'添加'"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="resetform"
      >
        <el-form
          ref="permissionForm"
          label-width="80px"
          :model="permissionForm"
          :rules="rules"
        >
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="permissionForm.name" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="permissionForm.code" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="permissionForm.description" />
          </el-form-item>
          <el-form-item label="权限启用">
            <el-switch
              v-model="permissionForm.enVisible"
              active-text="启用"
              active-value="1"
              inactive-text="不启用"
              inactive-value="0"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="showDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissionListAPI, delPermissionAPI, updatePermissionAPI, getPermissionDetailAPI, addPermissionAPI } from '@/api/permission'
import { NewListToTreeData } from '@/utils'
export default {
  data() {
    const validatorName = (rule, value, callback) => {
      // console.log('rule是', rule)
      // console.log('value是', value) // value是要检验的内容
      // console.log('callback是', callback) // callback是回调函数
      // if (this.isEdit) {
      //   // 在所有的权限名称中筛选出不是当前点击的那个权限名称
      //   const list = this.nameList.filter(item => item !== this._name)
      //   if (list.includes(value)) {
      //     callback(new Error(`权限名称已经被占用了`))
      //   } else {
      //     callback()
      //   }
      // } else {
      //   if (this.nameList.includes(value)) {
      //     callback(new Error(`权限名称已经被占用了`))
      //   } else {
      //     callback()
      //   }
      // }
      const list = this.isEdit ? this.nameList.filter(item => item !== this._name) : this.nameList
      console.log('占用的列表', list)
      list.includes(value) ? callback(new Error(`权限名称已经被占用了`)) : callback()
    }
    const validatorCode = (rule, value, callback) => {
      // if (this.isEdit) {
      //   // 在所有的权限标识中筛选出不是当前点击的那个权限标识
      //   const list = this.codeList.filter(item => item !== this._code)
      //   if (list.includes(value)) {
      //     callback(new Error(`权限名称已经被占用了`))
      //   } else {
      //     callback()
      //   }
      // } else {
      //   if (this.codeList.includes(value)) {
      //     callback(new Error(`权限名称已经被占用了`))
      //   } else {
      //     callback()
      //   }
      // }
      // 如果当前是编辑，则需要将当前编码从 已经占用的编码列表 中排除在外
      const list = this.isEdit ? this.codeList.filter(item => item !== this._code) : this.codeList
      console.log('权限标识', list)
      list.includes(value) ? callback(new Error(`权限标识已经被占用了`)) : callback()
    }
    return {
      list: [],
      // 保存权限名称的数组
      nameList: [],
      codeList: [], // 保存权限标识的数组
      showDialog: false,
      isEdit: false,
      permissionForm: {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '', // 类型
        id: ''
      },
      rules: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' },
          { validator: validatorName, trigger: ['blur', 'change'] } // 自定义检验规则
        ],
        code: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' },
          { validator: validatorCode, trigger: ['blur', 'change'] } // 自定义检验规则
        ],
        description: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }
        ]
      }

    }
  },
  computed: {
  },
  created() {
    this.getPermissionListFn()
  },
  methods: {
    // 清空表单
    resetform() {
      // 清空表单
      this.permissionForm = {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '', // 类型
        id: ''
      }
      // 清空表单校验
      this.$refs.permissionForm.resetFields()
    },
    // 页面打开的时候,获取列表
    async getPermissionListFn() {
      const res = await getPermissionListAPI()
      console.log('获取的权限是', res)
      // 页面创建的时候,把请求回来的数据中的name值保存到一个数组中
      this.codeList = res.map(item => item.code)
      this.nameList = res.map(item => item.name)
      this.list = NewListToTreeData(res)
    },
    // 点击新增按钮,根据传递的数据的不一样,来区分是添加权限还是添加功能
    async addFn(type, id) {
      this.showDialog = true
      this.isEdit = false
      // 记录当前添加的关键信息
      this.permissionForm.type = type
      this.permissionForm.pid = id
    },
    // 删除按钮,调用的方法
    delFn(id) {
      console.log(id)
      this.$confirm('确定要删除么?, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await delPermissionAPI(id)
        // 刷新页面
        this.getPermissionListFn()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑按钮,调用的方法
    async editFn(id) {
      this.isEdit = true
      this.showDialog = true
      // 数据回填,调用接口
      const res = await getPermissionDetailAPI(id)
      console.log(res)
      // 把当前点击的表单name值赋予给this._name
      this._name = res.name
      this._code = res.code
      console.log(this._name)
      // 给表单赋值
      this.permissionForm = res
    },
    // 点击确定之后调用的方法
    onSubmit() {
      this.$refs.permissionForm.validate((valid) => {
        if (!valid) {
          return
        }
        this.isEdit === true ? this.updateEditFn() : this.addPermissionList()
      })
    },
    // 添加完成后,点击确认按钮,调用接口的方法
    async addPermissionList() {
      // 调用接口
      const res = await addPermissionAPI(this.permissionForm)
      console.log(res)
      // 关闭弹窗
      this.showDialog = false
      // 刷新页面
      this.getPermissionListFn()
    },
    // 编辑之后确定调用的接口方法
    async updateEditFn() {
      const res = await updatePermissionAPI(this.permissionForm)
      console.log(res)
      this.$message.success('更新成功')
      this.showDialog = false // 关闭弹窗
      this.getPermissionListFn() // 刷新页面
    }
  }
}
</script>

<style>

</style>
